<template>
  <div id="blind-pool">
    <c-title :hide="false" text="盲盒商品池"></c-title>
    <div class="tip" v-if="$route.params.id">该盲盒可选<span v-for="(item,index) in levelData">[{{item.level_name}}]{{item.pivot.total}}个<block v-if="index !== levelData.length - 1">, </block> </span></div>
    <div class="detail-pand">
      <van-search v-model="searchVal" placeholder="搜索商品关键词" @search="searchActivityGoods"/>
      <van-tabs v-model="active" @click="searchActivityGoods">
        <van-tab :title="item.level_name + `(${item.probability}%)`" :name="item.id" v-for="(item,index) in levelData" :key="index">
          <div class="meal-box" v-for="(item,index) in activeData" :key="index">
            <img :src="item.thumb" alt="">
            <div class="text-detail">
              <span class="name">{{item.title}}</span>
              <div class="price">
                <span class="price-symbol">￥</span>
                <span class="price-val">{{item.price}}</span>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import blind_pool_controller from "./blind_pool_controller.js";
export default blind_pool_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#blind-pool {
  .tip {
    font-size: 0.75rem;
    font-weight: 400;
    color: #fc6b14;
    margin: 0.725rem 0.5rem 0.75rem 0.775rem;
    text-align: initial;
  }


  .detail-pand {
    .meal-box {
      display: flex;
      padding: 0.65rem;
      background: white;
      margin: 0.62rem 0.5rem;

      img {
        width: 3.8rem;
        height: 3.8rem;
        margin: 0;
      }

      .text-detail {
        display: flex;
        flex-direction: column;
        text-align: left;
        justify-content: space-between;
        margin: 0 0.525rem;

        .name {
          font-size: 0.7rem;
          font-weight: 500;
          color: #222;
          line-height: 1;
        }

        .price {
          .price-symbol {
            font-size: 0.55rem;
            font-weight: 500;
            color: #ed1818;
            zoom: 0.8;
          }

          .price-val {
            // font-size: 0.8rem;
            font-weight: 500;
            color: #ed1818;
          }
        }
      }
    }
  }

  .van-search {
    padding: 0.225rem 0.75rem;
  }

  .van-search__content {
    border-radius: 0.875rem;
  }
}
</style>
